<template>
  <table class="table">
    <thead>
      <tr>
        <slot></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for=" item in  data" :key="item.id">
        <td v-for="s in slots">
          {{ item[s.componentInstance?.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: function () {
        return []
      },
    }
  },
  data() {
    return {
      slots: []
    }
  },
  mounted() {
    this.slots = this.$slots.default
  }
}
</script>